.root {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.wrapper {
	gap: 16px;
	flex: 1;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	
	@include md-and-up {
		margin-left: var(--offset) !important;
	}
}

.titlebar {
	height: 22px;
	user-select: none;
	cursor: default;
	color: var(--mantine-color-bright);
	position: relative;
	z-index: 1;
}

$sidebar-thin: 74px;
$sidebar-wide: 215px;

.sidebar {
	z-index: 10;
	transition: all .15s ease-out;
	border-right: 1px solid transparent;
	width: $sidebar-wide;

	&-fill {
		width: 100%;
	}

	&-collapsed {
		width: $sidebar-thin;
	}

	&-hoverable:hover {
		width: 230px;
		border-color: var(--mantine-color-slate-7);

		@include light {
			border-color: var(--mantine-color-slate-1);
		}
	}

	:global(.mantine-ScrollArea-viewport) > div {
		display: unset !important;
	}
}